<script setup lang="ts">
import moment from "moment";
import logo from "@/assets/login/logo-main-white.png";
import { CaretTop, CaretBottom } from "@element-plus/icons-vue";
import Box from "@/components/ScaleBox/index.vue";
import { onBeforeUnmount, onMounted, ref } from "vue";
import VChart from "@/views/monitor/server/components/VChart.vue";
import MapVchart from "./components/VChart.vue";
import TrendingUp from "@iconify-icons/mdi/trending-up";
import { useChartsData } from "./hook/chartsData";
import * as echarts from "echarts";
import type { GeoJSON } from "echarts/types/src/coord/geo/geoTypes.d.ts";
import axios from "axios";
const time = ref(moment().format("YYYY-MM-DD HH:mm:ss"));
const timer = ref(null);
const {
  userMoneys,
  fourChartData,
  title,
  onePieOptions,
  twoPieOptions,
  activeFirstIndex,
  oneOptions,
  MapOptions,
  mapData,
  geoDatas,
  level,
  rightTwoOptions,
  rightOneOptions,
  leftThreeOptions
  // topFiveData
} = useChartsData();
const setRankClass = i => {
  switch (i) {
    case 0:
      return "one-rank";
    case 1:
      return "two-rank";
    case 2:
      return "three-rank";
    default:
      return "d-rank";
  }
};
const setClass = i => {
  switch (i) {
    case 0:
      return "one-f";
    case 1:
      return "two-f";
    case 2:
      return "three-f";
    default:
      return "d";
  }
};
const createBg = async () => {
  return new Promise((resolve, reject) => {
    let width = 600;
    let height = 600;
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");
    let grd = ctx.createRadialGradient(
      width / 2,
      height / 2,
      0,
      width / 2,
      height / 2,
      height
    );
    grd.addColorStop(0, "#0065db");
    grd.addColorStop(1, "#1a4bb7");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, width, height);
    resolve(canvas);
  });
};
const createBgGrid = async () => {
  return new Promise((resolve, reject) => {
    let width = 600;
    let height = 600;
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");
    let grd = ctx.createRadialGradient(
      width / 2,
      height / 2,
      0,
      width / 2,
      height / 2,
      height
    );
    grd.addColorStop(0, "#0065db");
    grd.addColorStop(1, "#1a4bb7");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, width, height);
    let len = 30;
    for (let i = 0; i < len; i++) {
      ctx.beginPath();
      ctx.moveTo(0, (i * 600) / len);
      ctx.lineTo(600, (i * 600) / len);
      ctx.setLineDash([4, 4]);
      ctx.lineWidth = 0.2;
      ctx.strokeStyle = "rgb(0,0,0)";
      ctx.stroke();
    }
    for (let i = 0; i < len; i++) {
      ctx.beginPath();
      ctx.moveTo((i * 600) / len, 0);
      ctx.lineTo((i * 600) / len, 600);
      ctx.setLineDash([4, 4]);
      ctx.lineWidth = 0.2;
      ctx.strokeStyle = "rgb(0,0,0)";
      ctx.stroke();
    }
    resolve(canvas);
  });
};
const setBg = async () => {
  const mapDiN = await createBg();
  MapOptions.value.geo[0].itemStyle.normal.areaColor.image = mapDiN;
  const mapDiH = await createBgGrid();
  MapOptions.value.geo[0].emphasis.itemStyle.areaColor.image = mapDiH;
};
const value1 = ref(moment().format("YYYY-MM-DD"));
const mapLoading = ref(false);
const mapDblClick = async vdata => {
  mapLoading.value = true;
  if (level.value === 2) {
    mapLoading.value = false;
    return;
  } else {
    level.value = level.value + 1;
  }
  let v = null;
  if (level.value === 2) {
    v = await axios.get(
      `https://geo.datav.aliyun.com/areas_v3/bound/${vdata.value}.json`
    );
  } else {
    v = await axios.get(
      `https://geo.datav.aliyun.com/areas_v3/bound/${vdata.value}_full.json`
    );
  }
  let child = v.data;
  mapData.value = child.features.map(item => {
    return {
      name: item.properties.name,
      value: item.properties.adcode
    };
  });
  geoDatas.value.push({
    data: mapData.value,
    geoJson: child,
    value: {
      name: vdata.name,
      value: vdata.value
    }
  });
  echarts.registerMap(
    vdata.name,
    geoDatas.value[geoDatas.value.length - 1].geoJson as GeoJSON
  );
  MapOptions.value.geo[0].map = vdata.name;
  MapOptions.value.geo[0].regions = mapData.value;
  setTimeout(() => {
    mapLoading.value = false;
  }, 300);
};
const contextmenu = e => {
  mapLoading.value = true;
  if (level.value === 0) {
    mapLoading.value = false;
    return;
  } else {
    level.value = level.value - 1;
  }
  geoDatas.value.pop();
  echarts.registerMap(
    geoDatas.value[geoDatas.value.length - 1].value.name,
    geoDatas.value[geoDatas.value.length - 1].geoJson as GeoJSON
  );
  MapOptions.value.geo[0].map =
    geoDatas.value[geoDatas.value.length - 1].value.name;
  MapOptions.value.geo[0].regions =
    geoDatas.value[geoDatas.value.length - 1].data;
  setTimeout(() => {
    mapLoading.value = false;
  }, 300);
};
onMounted(async () => {
  await setBg();
  timer.value = setInterval(() => {
    time.value = moment().format("YYYY-MM-DD HH:mm:ss");
  }, 1000);
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>

<template>
  <Box>
    <div class="my-container">
      <div class="top-title w-full h-[100px]" />
      <div class="top-title-center h-[66px]">{{ title }}</div>
      <div class="footer-bg">
        <div class="l-f" />
        <div class="l-f fz" />
      </div>
      <div class="time">
        {{ time }}
      </div>
      <div class="logo">
        <img :src="logo" alt="链合能源" />
      </div>
      <div class="main-content-left">
        <div class="one">
          <div class="item-title">
            <div class="title-z">
              <IconifyIconOffline :icon="TrendingUp" color="#fff" width="20" />
              <span>资源概况</span>
            </div>
            <div class="title-sub">行业,设备</div>
          </div>
          <div class="item-content">
            <div class="item-c-t">
              <div class="i-c-t-t">
                <div class="i-c-t-t-l">
                  <IconifyIconOffline
                    :icon="TrendingUp"
                    color="#fff"
                    width="30"
                  />
                </div>
                <div class="i-c-t-t-r">
                  <div class="flex">
                    <span>用户数量：</span>
                    <span class="text-[#00ffff] ml-[10px]">3</span>
                  </div>
                  <div class="flex">
                    <span>行业类型：</span>
                    <span class="text-[#00ffff] ml-[10px]">3</span>
                  </div>
                </div>
              </div>
              <div class="i-c-t-t">
                <div class="i-c-t-t-l">
                  <IconifyIconOffline
                    :icon="TrendingUp"
                    color="#fff"
                    width="30"
                  />
                </div>
                <div class="i-c-t-t-r">
                  <div class="flex">
                    <span>设备数量：</span>
                    <span class="text-[#00ffff] ml-[10px]">3</span>
                  </div>
                  <div class="flex">
                    <span>设备类型：</span>
                    <span class="text-[#00ffff] ml-[10px]">3</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-c-b flex w-full h-[calc(100%-76px)]">
              <div
                class="item-c-b-l w-[80px] flex flex-col justify-around items-center"
              >
                <div
                  :class="[activeFirstIndex === 0 ? 'active-bg' : '']"
                  class="item-c-b-l-i w-4/5 h-2/5 text-shu flex justify-center items-center"
                  @click="activeFirstIndex = 0"
                >
                  行业类型
                </div>
                <div
                  :class="[activeFirstIndex === 1 ? 'active-bg' : '']"
                  class="item-c-b-l-i w-4/5 h-2/5 text-shu flex justify-center items-center"
                  @click="activeFirstIndex = 1"
                >
                  设备类型
                </div>
              </div>
              <div
                v-if="activeFirstIndex === 0"
                class="item-c-b-r w-[calc(100%-80px)]"
              >
                <VChart :options="onePieOptions" />
              </div>
              <div
                v-if="activeFirstIndex === 1"
                class="item-c-b-r w-[calc(100%-80px)]"
              >
                <VChart :options="twoPieOptions" />
              </div>
            </div>
          </div>
        </div>
        <div class="one">
          <div class="item-title">
            <div class="title-z">
              <IconifyIconOffline :icon="TrendingUp" color="#fff" width="20" />
              <span class="text-[14px]">调节电量&全售电量</span>
            </div>
            <div class="title-sub">24小时曲线</div>
          </div>
          <div class="item-content">
            <VChart :options="oneOptions" />
          </div>
        </div>
        <div class="one">
          <div class="item-title">
            <div class="title-z">
              <IconifyIconOffline :icon="TrendingUp" color="#fff" width="20" />
              <span class="text-[14px]">调控分析曲线</span>
            </div>
            <div class="title-sub time-select flex justify-end">
              <el-date-picker
                v-model="value1"
                placeholder="请选择"
                date-format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </div>
          </div>
          <div class="item-content">
            <VChart :options="leftThreeOptions" />
          </div>
        </div>
      </div>
      <div class="main-content-right">
        <div class="one">
          <div class="item-title">
            <div class="title-z">
              <IconifyIconOffline :icon="TrendingUp" color="#fff" width="20" />
              <span class="text-[14px]">现货市场交易信息</span>
            </div>
            <div class="title-sub time-select flex justify-end">
              <el-date-picker
                v-model="value1"
                placeholder="请选择"
                date-format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </div>
          </div>
          <div class="item-content">
            <VChart :options="rightOneOptions" />
          </div>
        </div>
        <div class="one">
          <div class="item-title">
            <div class="title-z">
              <IconifyIconOffline :icon="TrendingUp" color="#fff" width="20" />
              <span>运行曲线</span>
            </div>
            <div class="title-sub">24小时曲线</div>
          </div>
          <div class="item-content">
            <VChart :options="rightTwoOptions" />
          </div>
        </div>
        <div class="one">
          <div class="item-title">
            <div class="title-z">
              <IconifyIconOffline :icon="TrendingUp" color="#fff" width="20" />
              <span>用户调节收益排名</span>
            </div>
            <!--            <div class="title-sub time-select flex justify-end">-->
            <!--              <el-date-picker-->
            <!--                v-model="value1"-->
            <!--                placeholder="请选择"-->
            <!--                date-format="YYYY-MM-DD"-->
            <!--                value-format="YYYY-MM-DD"-->
            <!--              />-->
            <!--            </div>-->
          </div>
          <div class="item-content">
            <!--            <VChart :options="oneOptions" />-->
            <div class="w-full h-full">
              <div class="yhtl-box text-white">
                <div
                  v-for="(item, index) in userMoneys"
                  :key="item.id"
                  class="yhtl-item flex items-center"
                >
                  <div class="yhtl-rank">
                    <span :class="[setRankClass(index)]">{{ index + 1 }}</span>
                  </div>
                  <div class="yhtl-name" :class="[setClass(index)]">
                    {{ item.name }}
                  </div>
                  <div class="yhtl-value">
                    {{ item.value.toLocaleString() }}元
                  </div>
                </div>
              </div>
              <!--              <div-->
              <!--                v-for="(item, index) in topFiveData"-->
              <!--                :key="item.id"-->
              <!--                class="message-item flex items-center"-->
              <!--              >-->
              <!--                <div class="message-one text-[16px]">NO{{ index + 1 }}</div>-->
              <!--                <div class="message-two">-->
              <!--                  {{ item.name }}-->
              <!--                </div>-->
              <!--                <div class="message-three">-->
              <!--                  <div class="j-d-bg" />-->
              <!--                  <div class="j-d-cd" :style="{ width: item.progress + '%' }" />-->
              <!--                  <div-->
              <!--                    class="dian"-->
              <!--                    :style="{ left: `calc(${item.progress}% - 4px)` }"-->
              <!--                  />-->
              <!--                </div>-->
              <!--                <div class="message-four">{{ item.progress }}%</div>-->
              <!--              </div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="main-center">
        <div class="top-map">
          <div
            v-for="item in fourChartData"
            :key="item.key"
            class="item-top-value"
          >
            <div class="inner-item-top-value" :class="[item.bg]">
              <div class="zb1">{{ item.name }}</div>
              <div class="zb2">{{ item.value }}</div>
              <div class="zb3">
                <span>{{ item.upOrDown === "up" ? "上升" : "下降" }}</span>
                <span>
                  <el-icon
                    v-if="item.upOrDown === 'up'"
                    color="rgb(68, 235, 234)"
                    size="24"
                    ><CaretTop
                  /></el-icon>
                  <el-icon v-else color="rgb(68, 235, 234)" size="24"
                    ><CaretBottom
                  /></el-icon>
                </span>
                <span class="color-span">{{ item.percent }}%</span>
              </div>
              <div class="ys-t" :class="[item.smallBg]" />
            </div>
          </div>
        </div>
        <div class="bottom-map">
          <MapVchart
            v-loading="mapLoading"
            :element-loading-background="'rgba(0,0,0,.4)'"
            style="height: 100%"
            :options="MapOptions"
            @contextmenu="contextmenu"
            @dblClick="mapDblClick"
          />
          <div class="map-content">
            <div class="map-c-t">资源在线情况</div>
            <div class="map-c-b">
              <el-progress
                :color="['#0056ff', '#00ffff']"
                type="circle"
                :stroke-width="14"
                :percentage="90"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </Box>
</template>

<style scoped lang="scss">
.my-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #131c23;

  .top-title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url("./assets/image/top-title-bg.png");
    background-position: 0 0;
    background-size: 100% 100%;
  }

  .top-title-center {
    position: absolute;
    top: 0;
    left: 19%;
    z-index: 2;
    width: 62%;
    font-family: douyuzhuiguangti, sans-serif;
    font-size: 30px;
    line-height: 76px;
    color: #fff;
    text-align: center;
    background-image: url("./assets/image/top-title-center.png");
    background-position: 0 0;
    background-size: 100% 100%;
  }

  .footer-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 50px;

    .l-f {
      width: 50%;
      height: 100%;
      background-image: url("./assets/image/footer.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 90% 100%;
    }

    .fz {
      transform: rotateX(360deg) scaleX(-1);
    }
  }

  .time {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 400px;
    height: 40px;
    font-family: douyuzhuiguangti, sans-serif;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
  }

  .main-content-left {
    position: absolute;
    top: 76px;
    bottom: 50px;
    left: 30px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 500px;

    .one {
      width: 100%;
      height: 32%;
    }
  }

  .main-content-right {
    position: absolute;
    top: 76px;
    right: 30px;
    bottom: 50px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 500px;

    .one {
      width: 100%;
      height: 32%;
    }
  }

  .main-center {
    position: absolute;
    top: 76px;
    bottom: 50px;
    left: 530px;
    width: calc(100% - 1060px);
    background-image: url("./assets/image/main-bg.jpg");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;

    .top-map {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 160px;

      .item-top-value {
        display: flex;
        align-items: center;
        width: 23.5%;
        height: 100%;

        .inner-item-top-value {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 100%;
          height: 80%;
          padding-left: 20px;
          background-repeat: no-repeat;
          background-size: 100% 100%;

          .ys-t {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 60px;
            height: 60px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .zb1 {
            font-family: douyuzhuiguangti, sans-serif;
            font-size: 16px;
            color: rgb(131 154 170 / 100%);
          }

          .zb2 {
            padding: 6px 0 12px;
            font-family: douyuzhuiguangti, sans-serif;
            font-size: 24px;
            color: rgb(255 255 255 / 100%);
          }

          .zb3 {
            display: flex;
            align-items: center;
            font-family: douyuzhuiguangti, sans-serif;
            font-size: 14px;
            color: rgb(131 154 170 / 100%);
          }
        }
      }
    }

    .bottom-map {
      position: relative;
      width: 100%;
      height: calc(100% - 160px);

      .map-content {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 200px;
        height: 200px;
        background-image: url("./assets/image/map-top-zy.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 100%;

        .map-c-t {
          width: 100%;
          height: 60px;
          font-family: douyuzhuiguangti, sans-serif;
          line-height: 60px;
          color: #fff;
          text-indent: 20px;
        }

        .map-c-b {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 110px;

          :deep(.el-progress__text) {
            color: #fff;
          }
        }
      }
    }
  }
}

.color-span {
  color: rgb(68 235 234);
}

.bg1 {
  background-image: url("./assets/image/bg1.png");
}

.ys-bg1 {
  background-image: url("./assets/image/ys-bg-1.png");
}

.ys-bg2 {
  background-image: url("./assets/image/ys-bg-2.png");
}

.ys-bg3 {
  background-image: url("./assets/image/ys-bg-3.png");
}

.ys-bg4 {
  background-image: url("./assets/image/ys-bg-4.png");
}

.bg2 {
  background-image: url("./assets/image/bg2.png");
}

.bg3 {
  background-image: url("./assets/image/bg3.png");
}

.bg4 {
  background-image: url("./assets/image/bg4.png");
}

.text-shu {
  writing-mode: vertical-rl;
}

.item-content {
  width: 100%;
  height: calc(100% - 44px);

  .item-c-b {
    .item-c-b-l {
      .active-bg {
        background: linear-gradient(
          to bottom,
          rgb(0 255 255 / 60%),
          rgb(0 86 255 / 40%)
        ) !important;
      }

      .item-c-b-l-i {
        font-family: douyuzhuiguangti, sans-serif;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        background:
          radial-gradient(
            circle at center center,
            rgb(25 25 112 / 0%),
            rgb(25 25 112 / 0%)
          ),
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) left
            top,
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) left
            top,
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) right
            top,
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) right
            top,
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) left
            bottom,
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) left
            bottom,
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) right
            bottom,
          linear-gradient(rgb(179 224 255 / 62%), rgb(179 224 255 / 62%)) right
            bottom,
          linear-gradient(rgb(56 144 184 / 60%), rgb(56 144 184 / 60%)) top,
          linear-gradient(rgb(26 87 130 / 60%), rgb(26 87 130 / 60%)) bottom,
          linear-gradient(
              rgb(56 144 184 / 60%),
              rgb(219 240 255 / 80%),
              rgb(26 87 130 / 60%)
            )
            left,
          linear-gradient(
              rgb(56 144 184 / 60%),
              rgb(219 240 255 / 80%),
              rgb(26 87 130 / 60%)
            )
            right;
        background-repeat: no-repeat;
        background-position:
          1px 1px,
          0 0,
          0 0,
          0 100%,
          0 100%,
          100% 0,
          100% 0,
          100% 100%,
          100% 100%,
          0 0,
          0 100%,
          0 100%,
          100% 100%;
        background-size:
          calc(100% - 2px) calc(100% - 2px),
          1px 10px,
          10px 1px,
          1px 10px,
          10px 1px,
          1px 10px,
          10px 1px,
          1px 10px,
          10px 1px,
          100% 1px,
          100% 1px,
          1px 100%,
          1px 100%;
      }
    }
  }

  .item-c-t {
    display: flex;
    width: 100%;
    height: 60px;
    padding: 8px 0;

    .i-c-t-t {
      display: flex;
      width: 50%;
      height: 100%;
      font-family: douyuzhuiguangti, sans-serif;
      background-image: url("./assets/image/map-top-zy.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 100%;

      .i-c-t-t-l {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 100%;
      }

      .i-c-t-t-r {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 70%;
        height: 100%;
        color: #fff;
      }
    }
  }
}

.item-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  font-family: douyuzhuiguangti, sans-serif;
  color: #fff;
  background-image: url("./assets/image/item-title.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;

  .title-sub {
    width: 40%;
    margin-top: 24px;
  }

  .title-z {
    display: flex;
    align-items: center;
    width: 60%;
    padding-left: 20px;
    margin-top: 10px;
    font-size: 20px;

    span {
      margin-left: 10px;
    }
  }
}

.time-select {
  :deep(.el-date-editor) {
    width: 170px !important;
    height: 24px !important;
  }

  :deep(.el-input__wrapper) {
    color: #fff;
    background-color: transparent !important;

    .el-input__inner {
      color: #fff;
    }
  }
}

.message-item {
  padding: 10px;
  font-family: douyuzhuiguangti, sans-serif;
  color: #fff;

  .message-one {
    width: 60px;
    color: #8daee1;
  }

  .message-two {
    width: 120px;
    overflow: hidden;
    color: #8daee1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message-three {
    position: relative;
    width: calc(100% - 220px);
    height: 12px;
    margin: 0 10px;

    .j-d-bg {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 6px;
      background: #1a3560;
      border-radius: 50px;
    }

    .j-d-cd {
      position: absolute;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 6px;
      background: #8daee1;
      border-radius: 50px;
    }

    .dian {
      position: absolute;
      top: -3px;
      z-index: 3;
      width: 12px;
      height: 12px;
      color: #fff;
      background-color: #99ebff;
      filter: blur(2px);
      border: none;
      border-radius: 100px;
      box-shadow: 0 0 20px #99ebff;
    }
  }

  .message-four {
    width: 60px;
    color: #f66f53;
  }
}

.logo {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 9;
  width: 60px;
}

.yhtl-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  //overflow: auto;
  font-family: douyuzhuiguangti, sans-serif;

  &::-webkit-scrollbar {
    display: none;
  }

  .yhtl-item {
    //padding: 10px 0;
  }

  .d-rank {
    background: #333f4a;
  }

  .one-rank {
    background: #ff4241;
  }

  .two-rank {
    background: #ff7938;
  }

  .three-rank {
    background: #ffab29;
  }

  .d {
    background-image: linear-gradient(
      to right,
      rgb(51 63 74 / 60%),
      rgb(51 63 74 / 0%)
    );
  }

  .one-f {
    background-image: linear-gradient(
      to right,
      rgb(255 66 65 / 60%),
      rgb(255 66 65 / 0%)
    );
  }

  .two-f {
    background-image: linear-gradient(
      to right,
      rgb(255 121 56 / 60%),
      rgb(255 121 56 / 0%)
    );
  }

  .three-f {
    background-image: linear-gradient(
      to right,
      rgb(255 171 41 / 60%),
      rgb(255 171 41 / 0%)
    );
  }
}

.yhtl-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

.yhtl-name {
  flex: 1;
  height: 40px;
  overflow: hidden;
  line-height: 40px;
  text-indent: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yhtl-value {
  width: 200px;
  height: 40px;
  overflow: hidden;
  font-size: 20px;
  line-height: 40px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
